const names = ['jack', 'josh', 'lucy']
const name = 'li'

/**
 * 1.函数调用时
 */
function foo(x, y, z) {
  console.log(x, y, z)
}

foo(...names) //jack josh lucy
foo(...name) //l i undefined

/**
 * 2.构造数组时
 */
const newNames = ['aaa', ...names, ...name]
console.log(newNames) //[ 'aaa', 'jack', 'josh', 'lucy', 'l', 'i' ]

/**
 * ES9/ES2018
 * 3.构建对象时
 *  - 相同的属性:后添加的覆盖先添加的
 *  - 数组会转成"索引-value"的对应形式
 */
const obj = {
  name: 'li',
  age: 19
}
const newObj = {...obj, age: 32, address: 'bj', ...name}
console.log(newObj) //{ '0': 'l', '1': 'i', name: 'li', age: 32, address: 'bj' }

/**
 * 4.展开运算符其实进行的是一个浅拷贝
 */
const obj1 = {
  name: 'dd',
  age: 18,
  friend: obj
}
const obj2 = {...obj1, ...obj}
console.log(obj2)
obj2.friend.name = 'abc'
console.log(obj) //{ name: 'abc', age: 19 }
